<!DOCTYPE html>
<html>
  <head>
    <title>CSV parse demo</title>
    <style>
      div {
        width: 60%;
        margin: 5rem auto;
        text-align: center;
      }
      textarea {
        width: 100%;
        height: 200px;
      }
      input {
        margin: 1rem;
      }
      pre {
        text-align: left;
        padding: 2rem;
        border: 1px solid black;
      }
    </style>  
  </head>
  <body>
    <div>
      <h1>CSV parse demo</h1>
      <p><a href="/">back</a></p>
      <label for="input">JSON input:</label>
      <textarea id="input"></textarea>
      <label for="options">Options:</label>
      <textarea id="options"></textarea>
      <input id="convert" type="submit" value="convert" />
      <pre><code id="output"></code></pre>
      <script type="module">
        import {parse} from '/lib/esm/parse/index.js';
        const convertEl = document.getElementById('convert');
        const inputEl = document.getElementById('input');
        inputEl.innerHTML = [
          'year,phone',
          'XXXX,XXX XXXX',
          'YYYY,YYY YYYY'
        ].join('\n');
        const optionsEl = document.getElementById('options');
        optionsEl.innerHTML = JSON.stringify({
          columns: true
        }, null, 2);
        const outputEl = document.getElementById('output');
        convertEl.onclick = (e) => {
          const input = inputEl.value;
          const options = JSON.parse(optionsEl.value);
          // Start parsing
          parse(input, options, function(err, data){
            if(err){
              return alert('Invalid CSV: '+err.message);
            }
            outputEl.innerHTML = JSON.stringify(data, null, 2);
          });
        };
      </script>
    </div>
  </body>
</html> 
